<script lang="jsx">

import { ref, defineComponent, watch } from 'vue'

export default defineComponent({
  props: {
    str: {
      typr: String,
      default: ''
    }
  },

  setup(props, { emit }) {
    const newStr = ref('')
    // const count = ref(100);

    watch(props, (newProps, oldProps) => {
      console.log(909090)
      getStr()
    }, { deep: true })

    const getjsx = () => {
      // props.num += 1
      emit('submit')
    }

    const getStr = () => {
      const _string = props.str?.replace(/【数值】/g, 'N')
      const string = _string?.replace(/【字符】/g, 'S')
      console.log(11111, string)
      newStr.value = string
      return string
    }
    return () => (
      <div class='replace-result-wrap'>
        {Array.from(newStr.value).map(item => {
          if (item === 'N') {
            return <el-input placeholder='请输入数值' disabled />
          } else if (item === 'S') {
            return <el-input placeholder='请输入字符' disabled />
          } else {
            return <span>{item}</span>
          }
        })}
      </div>

    )
  },
})

</script>

<style lang="scss" scoped>
.replace-result-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  .el-input {
    width: 160px;
    margin: 10px 10px;
  }
}
</style>